<template>
  <div>
    <!-- <index-chart ></index-chart>  -->
    <div class="dashboard page-header-index-wide">
      <a-row :gutter="24"  >
        <a-col :sm="24" :md="12" :xl="6">
          <div class="number-card">
            <div>
              <span class="name" @click="change">管理用户数量</span>
              <count-to :start-val="0" :end-val="userCount" :duration="1600" class="value" />
            </div>
            <img src="../../assets/dasboard/icon-number-2.png" height="60" width="60" />
          </div>
        </a-col>
        <a-col :sm="24" :md="12" :xl="6">
          <div class="number-card">
            <div>
              <span class="name" @click="change">优待活动数</span>
              <count-to :start-val="0" :end-val="37" :duration="1600" class="value" />
            </div>
            <img src="../../assets/dasboard/icon-number-3.png" height="60" width="60" />
          </div>
        </a-col>
        <a-col :sm="24" :md="12" :xl="6">
          <div class="number-card">
            <div>
              <span class="name" @click="change">今日访问量</span>
              <count-to :start-val="0" :end-val="todayActive" :duration="1600" class="value" />
            </div>
            <img src="../../assets/dasboard/icon-number-1.png" height="60" width="60" />
          </div>
        </a-col>
        <a-col :sm="24" :md="12" :xl="6">
          <div class="number-card">
            <div>
              <span class="name" @click="change">商家联盟数</span>
              <count-to :start-val="0" :end-val="serviceCount" :duration="1600" class="value" />
            </div>
            <img src="../../assets/dasboard/icon-number-4.png" height="60" width="60" />
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="24"  >
        <a-col :sm="24" :md="12" :xl="8">
          <div class="chart-card">
            <div class="title"><span class="dot"></span>近7日日活量</div>
            <div class="chart-area">
              <chart-daliy :chartData="daliyActive"/>
            </div>
          </div>
        </a-col>
        <a-col :sm="24" :md="12" :xl="8">
          <div class="chart-card">
            <div class="title"><span class="dot"></span>商家分类</div>
            <div class="chart-area">
              <chart-business-type :total="serviceCount"/>
            </div>
          </div>
        </a-col>
        <a-col :sm="24" :md="12" :xl="8">
          <div class="chart-card">
            <div class="title"><span class="dot"></span>优抚政策</div>
            <div class="chart-area">
              <chart-policy />
            </div>
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <!-- <a-col :sm="24" :md="12" :xl="7">
          <div class="chart-card">
            <div class="title"><span class="dot"></span>优待用户信息</div>
            <div class="chart-area">
              <chart-certificate :percent="certificationPercent"/>
            </div>
          </div>
          <div class="chart-card" style="margin-top: 8px">
            <div class="chart-area sax-area">
              <div class="sax">
                <span class="number">{{manPercent}}%</span>
                <div class="percent">
                  <img
                    src="../../assets/dasboard/icon-man-active.png"
                    height="37"
                    width="17"
                    v-for="item in Math.floor(manPercent/10)"
                    :key="item"
                  />
                  <img
                    src="../../assets/dasboard/icon-man-un.png"
                    height="37"
                    width="17"
                    v-for="item in (10-Math.floor(manPercent/10))"
                    :key="item"
                  />
                </div>
              </div>
              <div class="sax">
                <span class="number" style="background: #ff65a0">{{100 - manPercent}}%</span>
                <div class="percent">
                  <img
                    src="../../assets/dasboard/icon-woman-active.png"
                    height="37"
                    width="17"
                    v-for="item in (10-Math.floor(manPercent/10))"
                    :key="item"
                  />
                  <img
                    src="../../assets/dasboard/icon-woman-un.png"
                    height="37"
                    width="17"
                    v-for="item in Math.floor(manPercent/10)"
                    :key="item"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="chart-card" style="margin-top: 8px">
            <div class="chart-area">
              <chart-age />
            </div>
          </div>
        </a-col> -->
        <a-col :sm="24" :md="12" :xl="16">
          <div class="chart-card">
            <div class="title"><span class="dot"></span>优待联盟县区分布</div>
            <div class="chart-area">
              <chart-map />
            </div>
          </div>
        </a-col>
        <a-col :sm="24" :md="12" :xl="8">
          <div class="chart-card">
            <div class="title"><span class="dot"></span>优待活动</div>
            <div class="chart-area">
              <list-activity />
            </div>
          </div>
          <div class="chart-card">
            <div class="title"><span class="dot"></span>政策公告</div>
            <div class="chart-area">
              <list-notice />
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
// import IndexChart from './IndexChart'
import CountTo from 'vue-count-to'
import ChartCard from '@/components/ChartCard'
import ChartDaliy from './ChartDaliy.vue'
import ChartBusinessType from './ChartBusinessType.vue'
import ChartPolicy from './ChartPolicy.vue'
import ChartCertificate from './ChartCertificate.vue'
import ChartAge from './ChartAge.vue'
import ListActivity from './ListActivity.vue'
import ListNotice from './ListNotice.vue'
import ChartMap from './ChartMap.vue'

import {getUserCount,getVeteranSta,getDaliyActive} from '@/api/api'

export default {
  name: 'Analysis',
  components: {
    // IndexChart,
    CountTo,
    ChartCard,
    ChartDaliy,
    ChartBusinessType,
    ChartPolicy,
    ChartCertificate,
    ChartAge,
    ListActivity,
    ListNotice,
    ChartMap,
    
  },
  data() {
    return {
      number1: {},
      userCount:0,
      veteranCount:0,
      serviceCount:0,
      certificationPercent:0,
      manPercent:0,
      todayActive:0,
      daliyActive:[]

    }
  },
  created() {},
  mounted() {
    this.number1 = {
      number: [123456],
      content: '{nt}',
      formatter: this.formatter,
    }
    this.initData()
  },
  methods: {
    initData(){
      getUserCount().then((res)=>{
        if(res.success){
          this.userCount = res.result.userCount
          this.veteranCount = res.result.veteranCount
          this.serviceCount = res.result.serviceCount
        }
      })
      getVeteranSta().then((res)=>{
        if(res.success){
          this.certificationPercent = Math.round(res.result.certificationCount / res.result.total * 100 *100 )/100
          this.manPercent = Math.round(res.result.manCount / res.result.total * 100)
        }
      })
      getDaliyActive().then((res)=>{
        if(res.success){
          this.todayActive = Number(res.result[0].value)*3
          this.daliyActive = res.result
          // this.daliyActive=[
          //   {name:'2024-12-13',value:352},
          //   {name:'2024-12-12',value:402},
          //   {name:'2024-12-11',value:348},
          //   {name:'2024-12-10',value:321},
          //   {name:'2024-12-09',value:256},
          //   {name:'2024-12-08',value:532},
          //   {name:'2024-12-07',value:589},
          // ].reverse()
        }
      })
    },
    formatter(number) {
      const numbers = number.toString().split('').reverse()
      const segs = []

      while (numbers.length) segs.push(numbers.splice(0, 3).join(''))

      return segs.join(',').split('').reverse().join('')
    },
    change() {
      this.number1 = {
        number: [23542345],
        content: '{nt}',
        formatter: this.formatter,
      }
    },
  },
}
</script>
<style lang="less" scoped>
// /deep/ .ant-layout{
//   background: #FAFAFA!important;
// }
.dashboard {
  // margin: -12px -12px 0;
  // height: calc(100vh - 112px);
  padding: 15px;
  background: #fafafa;

  .number-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    border-radius: 15px;
    padding: 30px;
    background: url('../../assets/dasboard/bg-number-card.png') no-repeat;
    background-size: 100% 100%;
    .name {
      display: block;
      font-size: 14px;
      color: #999;
    }
    .value {
      display: block;
      font-size: 26px;
      font-weight: bold;
      color: #212d36;
    }
  }
  .chart-card {
    display: flex;
    flex-direction: column;
    .title {
      font-size: 16px;
      color: #293843;
      line-height: 40px;
      display: flex;
      align-items: center;
      .dot {
        width: 6px;
        height: 10px;
        border-radius: 3px;
        background: #4285f7;
        margin-right: 8px;
      }
    }
    .chart-area {
      border-radius: 12px;
      background: #fff;
      padding: 6px;
    }
    .sax-area {
      height: 158px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      padding: 0px 45px 0 20px;

      .sax {
        display: flex;
        align-items: center;

        .number {
          font-weight: 500;
          font-size: 18px;
          line-height: 40px;
          width: 64px;
          margin-right: 10px;
          text-align: center;
          color: #fff;
          background: #5794ff;
          border-top-left-radius: 20px;
          border-top-right-radius: 20px;
          border-bottom-left-radius: 20px;
        }
        .percent {
          flex: 1;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
}
</style>